/*
 * @Description: 页面说明
 * @Version: 版本号
 * @Author: chuzhangyi
 * @Date: 2022-09-14 13:40:23
 * @LastEditors: 最后一次编辑说明
 * @LastEditTime: 2022-09-14 14:10:55
 * @FilePath: \adminc:\Users\dell\Desktop\react (1)\新建文件夹\react\src\home.jsx
 */
import React, { Component } from "react";
import { BrowserRouter, Route, Switch,Redirect } from 'react-router-dom'
// Provider是react-redux两个核心工具之一，作用：将store传递到每个项目中的组件中
// 第二个工具是connect，稍后会作介绍
// 引入创建好的store实例
import { connect } from "react-redux";
import { setPageTitle, setInfoList } from "./store/actions";
const files = require.context('./view', true, /\.jsx$/)
let routerList = [];
files.keys().forEach((item, index) => {

  let pageUrl = item.split('/');

  let path = pageUrl.splice(-1)[0].split('.')[0];
  return routerList.push(
    {
      path,
      comp: files(item).default
    }
  )
});
// console.log(routerList, files.keys())
class Home extends Component {
  constructor(props) { 
    super(props);
  }
  render() { 
    return (
      <div className="HOME">
        { this.props.pageTitle}
        {/* 将store作为prop传入，即可使应用中的所有组件使用store */}
          <BrowserRouter>
            <Switch>
              {
                routerList.map((item, index) => {
                  return <Route key={index} path={`/${item.path}`} component={item.comp} />
                })
              }
              <Redirect from={"/"} to={'/index'}/>
            </Switch>
          </BrowserRouter>
      </div>
    )
  }
}
// mapStateToProps：将state映射到组件的props中
const mapStateToProps = (state) => {
  return {
    pageTitle: state.pageTitle,
    infoList: state.infoList
  }
}

// mapDispatchToProps：将dispatch映射到组件的props中
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    setPageTitle(data) {
      // 如果不懂这里的逻辑可查看前面对redux-thunk的介绍
      dispatch(setPageTitle(data))
      // 执行setPageTitle会返回一个函数
      // 这正是redux-thunk的所用之处:异步action
      // 上行代码相当于
      /*dispatch((dispatch, getState) => {
          dispatch({ type: 'SET_PAGE_TITLE', data: data })
      )*/
    },
    setInfoList(data) {
      dispatch(setInfoList(data))
    }
  }
}
//  export default Home
export default connect(mapStateToProps, mapDispatchToProps)(Home)